<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古琴</title>
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <script src="data.js"></script>
</head>
  

<style>
  /*轮播图片样式*/
  .carousel-item img{
      height: 100%;
      width: 100%;
  }
  /*渐变背景样式*/
  #body {
    height: 2100px;
  
    background-image: linear-gradient(#f8f8fc,#f57878);
  }
  /*轮播样式*/
  #my-carousel{
  position: absolute;
  top: 130px;
}
.back-top{
              width:80px;
              height: 80px;
              text-align: center;
              line-height: 80px;
              position: fixed;
              bottom: 120px;
              right: 30px;
          }
</style>

<body>
  
 <!--渐变背景颜色-->
 <div id="body">
   <div class="container"> 


    <header id="header">
        <div class="row">
            <!-- 布局 -->
            <div class=" container d-flex "  > 
                <!-- 非物质文化遗产的logo（响应式） -->
                <div class="col-2 embed-responsive ">
                    <img src="images/1.png" alt="" class="rounded-circle" style="width: 160px; height: 160px;">
                </div>
                <div class="col-10 " style="height: 50px;">
                    <!-- 非物质文化遗产文字 -->
                    <h1 class="logo " id="fy-logo">非物质文化遗产</h1>
                    <div >
                        <!-- 功能栏：分类的导航链接（胶囊导航） -->
                        <ul class="nav nav-pills">
                          <!-- 非物质文化遗产的全部和分类 -->
                          <li class="nav-item"><a class="nav-link" href="../second-page.html" style="color:white;font-family:'KaiTi'; font-size:20px;">查看全部</a></li>
                          <li class="nav-item"><a class="nav-link" href="../byys.html" style="color:white;font-family:'KaiTi';font-size:20px;">表演艺术</a></li>
                          <li class="nav-item"><a class="nav-link" href="../ctsgy.html" style="color:white;font-family:'KaiTi';font-size:20px ;">传统手工艺</a></li>
                          <li class="nav-item"><a class="nav-link" href="../ktct.html" style="color:white;font-family:'KaiTi';font-size:20px ;">口头传统</a></li>
                          <li class="nav-item"><a class="nav-link" href="../ysyjq.html" style="color:white;font-family:'KaiTi';font-size:20px ;">仪式与节庆</a></li>
                          <li class="nav-item"><a class="nav-link" href="../zrjyyzz.html" style="color:white;font-family:'KaiTi';font-size:20px ;">自然界与宇宙中</a></li>
                      </ul>
                        
                       
                    </div>
                        
                    </div>     
                    
                </div>

                
         <div id="content"  style="width: 1000px; margin:auto ;">  
           <!--查看当前位置-->
           <style>
            .breadcrumb-item + .breadcrumb-item::before {
                content: ">";
           }
       </style>
           <nav>
                <ol class="breadcrumb" style="background-color: rgb(248, 234, 234)" >
                   <p style="color: gray;">你所在的位置：</p> 
                  <li class="breadcrumb-item"><a href="../index.html">首页</a></li>
                  <li class="breadcrumb-item"><a href="../byys.html">目录</a></li>
                  <li class="breadcrumb-item active">当前目录</li>
                </ol>
            </nav>     
            <hr size="10">
            
     
     <!--介绍具体内容-->
        <div class="container " >
             <div class="row d-flex" >
                 <div class="col-md-9">
                  <h3 id="guqin_title" style="color: black; font-family:fantasy; " ></h3>
      
                  <div id="guqin_description" style="color: black;  font-family:serif;"></div> 
                 
                </div>
              <!--剪纸图片-->
              <div class="col-md-3">
              <div id="picture_jianzhi">
                <img src="images/gp4.jpg"  alt="" class="rounded-circle" style="right: auto; width: 250px; height: 200px;">
                 <p style="color:gray; font-size: smaller;">古琴图片</p> 
                </div>
                
              </div>
              </div>  
            </div>
               <script>
                // TODO 从当前url中查找参数
                let c = '古琴';
            
            let category = categories[c];
            
            //
            let guqin_title = document.getElementById('guqin_title');
           
            guqin_title.innerText = category.title;
            //
            let guqin_description = document.getElementById('guqin_description');
            guqin_description.innerText = category.description;
            
             
            
            
            </script>
            <!--分割线-->
             <hr>
             <!--表格介绍-->
             
              <table>
                <thead>
                  <tr>
                    <th>中文名</th>
                    <th>外文名</th>
                    <th>遗产批准时间</th>
                    <th>开始时间 </th>
                    <th>代表人物</th>
                    
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>古琴</td>
                    <td> guqin</td>
                    <td> 2003-11-7</td>
                    <td>西周一春秋</td>
                    <td>伯牙、孔子等</td>
                   
                  </tr>
                 
                </tbody>
              </table>
            

               <!--分割线-->
             <hr>

              <!--内容具体介绍-->
              <h3 id="guqin_title2" style="color: black; font-family:fantasy;"></h3>  
              <div id="guqin_description2" style="color: black;  font-family:serif;"></div>
            
              <!--分割线-->
              <hr>
            <script>
                  let a = '古琴';
            
            let category2 = categories[a];
            
            //
            let guqin_title2 = document.getElementById('guqin_title2');
           
            guqin_title2.innerText = category2.title2;
            //
            let guqin_description2 = document.getElementById('guqin_description2');
            guqin_description2.innerText = category2.description2;

             
            </script>

                 <!--内容具体介绍-->   
                 <div class="row">
                    <!--使用轮播进行介绍--> 
                   <div class="col-md-4">
                     
                    <div class="carousel slide" style="width: 300px; height: 200px;" id="my-carousel" data-ride="carousel" data-interval="3000">
                      <p style="font-size: smaller;color: gray;">古琴图片</p>
                      <!-- carousel-indicators:指示器 -->
                      <ol class="carousel-indicators">
                          <li data-target="#my-carousel " data-slide-to="0" class="active"></li>
                          <li data-target="#my-carousel" data-slide-to="1"></li>
                          <li data-target="#my-carousel" data-slide-to="2"></li>
                      </ol>
                      <!-- 放置轮播图片的容器 -->
                      <div class="carousel-inner">
                          <div class="carousel-item active" style="align-self: center;">
                              <img src="images/gq3.jpg" alt="">
                          </div>
                          <div class="carousel-item">
                              <img src="images/gq6.jpg" alt="">
                          </div>
                          <div class="carousel-item">
                              <img src="images/guqin2.jpg" alt="">
                          </div>
                      </div>
                      <!-- 轮播图的控件：上一页和下一页 -->
                      <div>
                          <a href="#my-carousel" class="carousel-control-prev" data-slide="prev">
                              <span class="carousel-control-prev-icon"></span>
                          </a>
                          <a href="#my-carousel" class="carousel-control-next" data-slide="next">
                              <span class="carousel-control-next-icon"></span>
                          </a>
                      </div>
                  </div>
                   </div>
                    <!--使用文字进行具体介绍--> 
                   <div class="col-md-8" >
                 <div style="font-family: serif; color: black; ">
                  <h3>外貌特质</h3>
                  <hr style="width: 20%; float: left;;">
                  <br><br>
                  <h5>款式分类</h5>
                  <p>古琴造型优美，常见的为伏羲式、仲尼式、连珠式、落霞式、灵机式、蕉叶式、伶官式、神农式、响泉式、凤势式、师旷式、亚额式、钟离式（鹤鸣秋月琴）、剑式等。主要是依琴体的项、腰形制的不同而有所区分。最著名的九霄环佩就是伏羲式。</p>
                  <h5>外形结构</h5>
                  <p>古琴一般长约三尺六寸五，象征一年三百六十五天；面圆底扁，象征天地；琴身与凤身相应（也可说与人身相应）有头、颈、肩、腰、尾、足。</p>
                  <h5><b> 琴面</b></h5>
                  为能充分振动，面板一般多用桐木、杉木等松质木料制成。向内外侧呈瓦弧形，与底板胶合而成琴。古琴的周身髹以生漆与鹿角霜粉屑(或瓦灰)调和的底胎，干透磨平后多次擦拭生漆而成。琴面木材须选料精良，纹理梳直匀称。若能觅得古桐木、古庙大梁悬钟之木，或古代棺廓老木更佳。琴面内腹斫成膛腔，在龙池、凤沼处留有微微隆起的纳音。一般常见设有两根音柱(天柱、地柱)连接着面板底板，传导振动。
                 
                </div>
              </div>
              <div class="col-md-12">
              <div style="font-family: serif; color: black; ">
                <h5><b> 琴弦</b></h5>
                琴面从外向内由粗及细缚弦七根，古时琴弦用丝质制成，今多用钢弦。如果弦绕至雁足时圈数不多，就需要使用其它牢固的线接续增加弦的稳定。古琴最初只有五根弦，内合五行，金、木、水、火、土，外合五音，宫、商、角、徵、羽，象征君、臣、民、事、物五种社会等级，后来周朝周文王、周武王增加文、武二弦，象征君臣之合恩。
                  <h5><b> 琴头</b></h5>
                  “琴头”上部称为额，额下端镶有用以架弦的硬木，称为“岳山”，又称“临岳”，是琴的最高部分。在琴面右侧头部8－10厘米处横嵌的一条用硬制木制成。岳山边靠额一侧镶有一条硬木条，称为“承露”，上有七个“弦眼”，用以穿系琴弦，其下有七个用以调弦的“琴轸”，琴头的侧端，又有“凤眼”和“护轸”。琴头部有两个暗槽，一名“舌穴”，一名“音池”。
                   <h5><b>轸子、轸池、护轸、鸭掌</b> </h5>
                   轸子系绒扣调节琴弦松紧长度、改变音高之用。多用红木紫檀等坚韧耐磨的木料制成。中心头尾穿通，颈部旁侧有一斜孔与中心孔相通，侧孔斜向顶端。考究者孔口呈钝状，顶部孔端微微向中心凹陷。底板上储放轸子的浅平凹巢，称为轸池。底板琴头两侧向下垂凸的部位称为护轸，保护轸子免受外力碰击。
                   <div class="row">
                  <div class="col-md-10">
                  <h4><b>声音特点</b> </h4>
                  中国古琴的音域为四个八度零两个音。有散音七个、泛音九十一个、按音一百四十七个  。古琴的声音是非常独特的，一般人听琴乐能感到古琴的安静悠远。“静”可以说是琴音的最大特点，琴音也被称为“太古之音”、“天地之音”。这里的“静”还有两层意义，一是抚琴需要安静的环境，二是抚琴更需安静的心境。
古琴的三种音，散音、泛音、按音，都非常安静。散音松沉而旷远，让人起远古之思；其泛音则如天籁，有一种清冷入仙之感；按音则非常丰富，手指下的吟猱余韵、细微悠长，时如人语，可以对话，时如人心之绪，缥缈多变。泛音象天，按音如人，散音则同大地，称为天地人三籁。因此古琴一器具三籁，可以状人情之思，也可以达天地宇宙之理。</div>
                      
                      <div class="col-md-2" >
                        
                          <img src="images/gq1.jpg" alt=""  id="shopping">
                          <a href="https://item.taobao.com/item.htm?id=600921661836&ali_trackid=2:mm_31205575_2144050062_111424150472:1640268624_193_745411935&union_lens=lensId:OPT@1640268260@212bfe2e_086c_17de79b6390_ca06@01;recoveryid:201_11.27.26.119_1019282_1640268252097;prepvid:201_11.11.161.153_1021486_1640268259540&spm=a2e1u.19484427.29996460.18&pvid=100_11.182.41.68_50499_7501640268259979423&scm=null&bxsign=tbk9y+YCbZ6H+w4z34i0CB94dIvYYMr8sLxh/mwpoB7yrtmGB+NIn98UfsD37SsW1MgjjCfcmrqVGl5csyLqJ1V7nXxt0pNANSRl+mAuYcQp1A=&mt=">
                          点击此处购买>>
                          </a>
                        
                        </div>

                      </div>

                  </div>
                
              </div> 
                       
            </div>
            
            </div>
            <div class="back-top">
              <a href="#header">
                <img src="../images/top.gif" alt="" style="width: 60px; height: 80px;">
              </a>
          </div>
          </div>
          <!-- 页脚 -->
          <br><br><br>
          <hr>
          <footer class="footer">
            <div class="sub-foot" style="font-size: smaller;">
      
                法律条款     
                隐私保护     
                联系我们     
                常见问题     
            </div>
            <P style="font-size: smaller; text-align: center;">版权所有@NIIT</P>
          </footer>  
        </div>
     

</body>
</html>